<template>
  <div>
    <section class="demo-text">
      <div style="height: 82vh " ref="myEcharts"></div>
    </section>
    <p
      style="text-align:right;padding-right:60px;    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;"
    >@王睿杰 2019.7.24</p>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts-gl";
import maps from "@/js/mapJson/henan.js";
import { pds } from "@/js/mapJson/pds.js";
import { zhengzhou } from "@/js/mapJson/zhengzhou.js";
import { luoyang } from "@/js/mapJson/luoyang.js";
export default {
  data() {
    return {
      mychar: null,
      maplist: { henan:maps.henan, pds, zhengzhou, luoyang },
      option1: {
        title: {
          text: "河南省配网项目分布3D图",
          left: "center",
          top: "20px",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {

        },
        legend: {
          orient: "horizontal",
          bottom: "bottom",
          right: "1%",
          textStyle: {
            color: ["#9e05d0", "#1df3f0", "#1d96f3"]
          },
          selectedMode: "multiple"
        },
        geo3D: [
          {
            show: true,
            map: "henan",
            label: {
              show: true,
              distance: 1
            },
            viewControl: {
              distance: 120,
              panMouseButton: "left",
              rotateMouseButton: "right"
            },
            itemStyle: {
              color: "#0a2231",
              borderColor: "#5EEcf0",
              borderWidth: 1,
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              label: {
                show: true,
                distance: 2,
                textStyle: {
                  color: "#000"
                }
              }
            },
            regionHeight: 2
          }
        ],

        backgroundColor: "tansparent"
      }
    };
  },
  methods: {
    loadmap() {
      for (let item in this.maplist) {
        echarts.registerMap(item, this.maplist[item]);
      }
    }
  },
  mounted() {
    const _this = this;
    this.loadmap();
    this.$nextTick(() => {
      this.mychar = echarts.init(_this.$refs.myEcharts);
      _this.mychar.setOption(_this.option1);
      _this.mychar.on("click", function(params) {
        console.log(params);
      });
    });
  }
};
</script>
